<div class="card mb-4">
    <div class="card-header position-sticky" style="top: 3.9rem; z-index: 12">
        <h6 class="m-0">
            Entity
            <span ng-bind="$ctrl.title"></span>
            <a data-bs-toggle="collapse" href=".mix-database-entity" role="button" aria-expanded="false"
                aria-controls="mix-database-entity" class="btn btn-link text-primary btn-sm float-end py-0"><span
                    class="fas fa-minus-square"></span> Show / Hide data</a>
            <a ng-click="$ctrl.addAttr()" class="btn btn-link text-primary btn-sm float-end py-0"><span
                    class="fas fa-plus"></span> Create column</a>
        </h6>
    </div>
    <div class="card-body mix-database-entity">
        <div class="alert alert-warning mb-0" role="alert" ng-if="!$ctrl.columns || !$ctrl.columns.length">
            <i class="fas fa-exclamation-triangle text-warning me-3"></i> No column
            has been created for this table yet!
        </div>
        <div dnd-list="$ctrl.columns" dnd-inserted="$ctrl.updateOrders(index)" ng-if="$ctrl.columns.length" class="">
            <div ng-repeat="col in $ctrl.columns track by $index" dnd-draggable="col" dnd-type="'col'"
                dnd-effect-allowed="copyMove" dnd-selected="$ctrl.selectedCol = col"
                dnd-dragstart="$ctrl.dragStart($index)" ng-class="{'selected': $ctrl.selectedCol === col}" class="mb-3">
                <div class="row border-top pt-1">
                    <div style="width: 5%">
                        <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"
                            style="cursor: grab"></small>
                    </div>
                    <div style="width: 20%">
                        <small class="form-label">Column title: </small>
                        <input ng-model="col.title" placeholder="Title" ng-blur="$ctrl.generateName(col)"
                            class="form-control form-control-sm" />
                    </div>
                    <div style="width: 20%">
                        <small class="form-label">Column name: </small>
                        <!-- <span class="text-black-50" ng-bind="col.name"></span> -->
                        <div class="input-group input-group-sm">
                            <input class="form-control form-control-sm text-black-50" ng-model="col.name" />
                            <button class="btn btn-outline-primary" type="button"
                                ng-click="$ctrl.generateName(col,true)">
                                <span class="fa fa-redo"></span>
                            </button>
                        </div>
                    </div>
                    <div style="width: 15%">
                        <small class="form-label">Type {{col.dataType}}</small>
                        <mix-select model="col.dataType" options="$ctrl.localizeSettings.dataTypes"
                            callback="$ctrl.changeDataType(type)">
                        </mix-select>
                    </div>
                    <div style="width: 30%">
                        <div class="" ng-if="col.dataType != 'Reference'">
                            <small class="form-label">Value</small>
                            <input ng-model="col.defaultValue" placeholder="Default Value"
                                class="form-control form-control-sm" />
                            <!-- <mix-value-editor string-value="col.defaultValue" type="col.dataType">
                            </mix-value-editor> -->
                        </div>
                        <div ng-if="col.dataType == 'Reference'">
                            <small>
                                [
                                <a ng-click="$ctrl.showReferences(col)" class="btn-link text-primary">+ Select</a>
                                ] Database
                            </small>
                            <br />
                            <a ng-if="col.referenceId" href="/portal/mix-database/details/{{col.referenceId}}"
                                class="btn btn-link" target="_blank"><small>
                                    <span class="fas fa-pen text-primary"></span> Edit linked
                                    database {{col.reference.title}}</small>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-1">
                        <div class="btn-group btn-group-sm float-end mt-4">
                            <a href="" class="btn btn-outline-danger mx-1" ng-click="$ctrl.removeAttr($index)">
                                <span class="fas fa-trash-alt"></span>
                            </a>
                            <a href="" class="btn btn-outline-secondary mx-1"
                                ng-click="col.showAdvanced = !col.showAdvanced">
                                <span ng-if="!col.showAdvanced" class="mi mi-CaretRight8"></span>
                                <span ng-if="col.showAdvanced" class="mi mi-ChevronDownSmall"></span>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="my-2" ng-show="col.showAdvanced">
                    <div class="row mb-3" ng-show="col.dataType == 'Upload'">
                        <div class="col-md-12 mb-3" ng-if="col.columnConfigurations.upload.arrayAccepts">
                            <label class="form-label">Accepts</label>
                            <tags-input min-length="1" ng-model="col.columnConfigurations.upload.arrayAccepts">
                            </tags-input>
                        </div>
                        <div class="form-check form-switch mx-2 float-start">
                            <input type="checkbox" class="form-check-input"
                                ng-model="col.columnConfigurations.upload.isCrop" id="{{'isCrop_' + $index}}" />
                            <label class="custom-form-label" for="{{'isCrop_' + $index}}">
                                Crop
                            </label>
                        </div>
                        <div class="col-md-3 mx-1" ng-if="col.columnConfigurations.upload.isCrop">
                            <small>Width</small>
                            <input type="number" ng-model="col.columnConfigurations.upload.width" class="sm-control" />
                        </div>
                        <div class="col-md-3 mx-1" ng-if="col.columnConfigurations.upload.isCrop">
                            <small>Height</small>
                            <input type="number" ng-model="col.columnConfigurations.upload.height" class="sm-control" />
                        </div>
                    </div>
                    <div class="row">
                        <div style="width: 5%"></div>
                        <div class="col-md form-check-inline px-2">
                            <div class="form-check form-switch mx-2 float-start">
                                <input type="checkbox" class="form-check-input" ng-model="col.isEncrypt"
                                    id="{{'isEncrypt_' + $index}}" />
                                <label class="form-check-label" for="{{'isEncrypt_' + $index}}">
                                    Encrypt
                                </label>
                            </div>
                            <div class="form-check form-switch mx-2 float-start">
                                <input type="checkbox" class="form-check-input" ng-model="col.isUnique"
                                    id="{{'unique_' + $index}}" />
                                <label class="form-check-label" for="{{'unique_' + $index}}">
                                    Unique
                                </label>
                            </div>
                            <div class="form-check form-switch mx-2 float-start">
                                <input type="checkbox" class="form-check-input" ng-model="col.isRequire"
                                    id="{{'required_' + $index}}" />
                                <label class="form-check-label" for="{{'required_' + $index}}">
                                    Mandatory
                                </label>
                            </div>
                            <div class="form-check form-switch mx-2 float-start">
                                <input type="checkbox" class="form-check-input" ng-model="col.isSelect"
                                    id="{{'select_' + $index}}" />
                                <label class="form-check-label" for="{{'select_' + $index}}">
                                    Default values
                                </label>
                            </div>
                            <div class="form-check form-switch mx-2 float-start">
                                <input type="checkbox" class="form-check-input" ng-model="col.isRegex"
                                    id="{{'regex_' + $index}}" />
                                <label class="form-check-label" for="{{'regex_' + $index}}">
                                    Validation
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3 mx-2">
                        <div style="width: 5%"></div>
                        <div class="form-check form-switch mx-2 float-start">
                            <label class="form-label">
                                Max Length
                            </label>
                            <input type="number" class="form-control form-inline"
                                ng-model="col.columnConfigurations.maxLength" />
                        </div>
                        <div class="form-check form-switch mx-2 float-start">
                            <label class="form-label">
                                Options Configuration Name
                            </label>
                            <input type="text" class="form-control form-inline"
                                ng-model="col.columnConfigurations.optionsConfigurationName" />
                        </div>
                        <div class="form-check form-switch mx-2 float-start">
                            <label class="form-label">
                                Belong To
                            </label>
                            <input type="text" class="form-control form-inline"
                                ng-model="col.columnConfigurations.belongTo" />
                        </div>

                    </div>

                </div>
                <div class="mix-database-entity">
                    <div class="row mb-2" ng-show="col.isRegex && col.showAdvanced">
                        <div style="width: 5%"></div>
                        <div class="col-10">
                            <div class="input-group">
                                <span class="input-group-text">Regular Expression</span>
                                <input type="text" class="col form-control form-control-sm" ng-model="col.regex"
                                    placeholder="(^\d{1,10}$)" />
                            </div>
                        </div>
                    </div>
                    <div ng-show="col.isSelect">
                        <div class="row my-2">
                            <div style="width: 5%"></div>
                            <div class="col-10">
                                <div class="input-group mb-3">
                                    <span class="input-group-text">Input option value</span>
                                    <input type="text" class="form-control form-control-sm" id="option_{{$index}}"
                                        ng-enter="$ctrl.addOption(col,$index)"
                                        placeholder="Please type in the value then enter to add to option list..." />
                                </div>

                                <div class="row my-2 ms-2" ng-repeat="opt in col.options track by $index">
                                    <div class="col-md pl-4">
                                        <input type="text" class="form-control form-control-sm"
                                            ng-model="col.options[$index].value" />
                                    </div>
                                    <div style="width: 5%">
                                        <a class="btn btn-sm" ng-click="col.options.splice($index,1)">
                                            <span class="fas fa-times text-danger"></span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div ng-show="col.isSelect">
            <div class="row">
                <label class="col-sm-3 col-form-label">Title</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control form-control-sm" id="option_{{$index}}"
                        ng-enter="$ctrl.addOption(col,$index)" placeholder="fill then enter to add options" />
                </div>
            </div>
            <div class="row" ng-repeat="opt in col.options track by $index">
                <div class="col-md-10 row">
                    <input type="text" class="col-7 form-control form-control-sm"
                        ng-model="col.options[$index].value" />
                    <select class="col-5 form-control form-control-sm" ng-model="col.options[$index].dataType">
                        <option ng-repeat="item in $ctrl.localizeSettings.dataTypes track by $index"
                            ng-value="item.value">
                            {{item.name}}
                        </option>
                    </select>

                    <hr />
                </div>
            </div>
        </div>
    </div>
</div>